<template>
	<div class="body">
		<retreat title="订单"></retreat>
		<van-tabs v-model="activeName" background="#1ba4f0" color="#fff" line-height="1" line-width="25" title-active-color="#fff"
			title-inactive-color="#fff">
			<van-tab title="全部" name="a" title-class="tab">
				<div class="top"></div>
				<div class="conter">
					<section>
						<div class="sec1">
							<div class="time">2021/03/25 10:27</div>
							<div class="title">代付款</div>
						</div>
						<van-divider></van-divider>
						<div class="sec2">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
						</div>
						<div class="sec3">订单号:123456789</div>
						<div class="sec4">
							<b>共4件 实付款：<span>￥750</span></b>
							<van-button round color="#EE500C" size="small">去付款</van-button>
						</div>
					</section>
					<section>
						<div class="sec1">
							<div class="time">2021/03/25 10:27</div>
							<div class="title">代付款</div>
						</div>
						<van-divider></van-divider>
						<div class="sec2">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
						</div>
						<div class="sec3">订单号:123456789</div>
						<div class="sec4">
							<b>共4件 实付款：<span>￥750</span></b>
							<van-button round color="#EE500C" size="small">去付款</van-button>
						</div>
					</section>
					<section>
						<div class="sec1">
							<div class="time">2021/03/25 10:27</div>
							<div class="title">代付款</div>
						</div>
						<van-divider></van-divider>
						<div class="sec2">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
						</div>
						<div class="sec3">订单号:123456789</div>
						<div class="sec4">
							<b>共4件 实付款：<span>￥750</span></b>
							<van-button round color="#EE500C" size="small">去付款</van-button>
						</div>
					</section>
					<section>
						<div class="sec1">
							<div class="time">2021/03/25 10:27</div>
							<div class="title">代付款</div>
						</div>
						<van-divider></van-divider>
						<div class="sec2">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
						</div>
						<div class="sec3">订单号:123456789</div>
						<div class="sec4">
							<b>共4件 实付款：<span>￥750</span></b>
							<van-button round color="#EE500C" size="small">去付款</van-button>
						</div>
					</section>
					
					<div class="cheng"></div>
				</div>
			</van-tab>
			<van-tab title="退换货" name="b" title-class="tab">
				<div class="top"></div>
				<div class="conter">
					<section>
						<div class="sec1">
							<div class="time">2021/03/25 10:27</div>
							<div class="title">代付款</div>
						</div>
						<van-divider></van-divider>
						<div class="sec2">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
						</div>
						<div class="sec3">订单号:123456789</div>
						<div class="sec4">
							<b>共4件 实付款：<span>￥750</span></b>
							<van-button round color="#EE500C" size="small">去付款</van-button>
						</div>
					</section>
					<div class="cheng"></div>
				</div>
				
			</van-tab>
			<van-tab title="待付款" name="c" title-class="tab">
				<div class="top"></div>
				<div class="conter">
					<section>
						<div class="sec1">
							<div class="time">2021/03/25 10:27</div>
							<div class="title">代付款</div>
						</div>
						<van-divider></van-divider>
						<div class="sec2">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
						</div>
						<div class="sec3">订单号:123456789</div>
						<div class="sec4">
							<b>共4件 实付款：<span>￥750</span></b>
							<van-button round color="#EE500C" size="small">去付款</van-button>
						</div>
					</section>
					<div class="cheng"></div>
				</div>
				
			</van-tab>
			<van-tab title="待收货" name="d" title-class="tab">
				<div class="top"></div>
				<div class="conter">
					<section>
						<div class="sec1">
							<div class="time">2021/03/25 10:27</div>
							<div class="title">代付款</div>
						</div>
						<van-divider></van-divider>
						<div class="sec2">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
						</div>
						<div class="sec3">订单号:123456789</div>
						<div class="sec4">
							<b>共4件 实付款：<span>￥750</span></b>
							<van-button round color="#EE500C" size="small">去付款</van-button>
						</div>
					</section>
					<div class="cheng"></div>
				</div>
				
			</van-tab>
			<van-tab title="待评价" name="e" title-class="tab">
				<div class="top"></div>
				<div class="conter">
					<section>
						<div class="sec1">
							<div class="time">2021/03/25 10:27</div>
							<div class="title">代付款</div>
						</div>
						<van-divider></van-divider>
						<div class="sec2">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
							<img src="../assets/logo.png">
						</div>
						<div class="sec3">订单号:123456789</div>
						<div class="sec4">
							<b>共4件 实付款：<span>￥750</span></b>
							<van-button round color="#EE500C" size="small">去付款</van-button>
						</div>
					</section>
					<div class="cheng"></div>
				</div>
				
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
	import {
		Tab,
		Tabs,
		Button,
		Divider
	} from 'vant'
	import Retreat from '@/components/Retreat.vue'
	export default {
		data() {
			return {
				activeName: 'a',
				// msg:'订单'
			}
		},
		methods: {
			
		},
		components: {
			[Tab.name]: Tab,
			[Tabs.name]: Tabs,
			[Button.name]: Button,
			[Divider.name]: Divider,
			Retreat
		}
	}
</script>

<style lang="less" scoped>
	@themeColor: #1ba4f0;
	@backColor: #f5f5f5;

	@shenglue: {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	// body>#app>.body>.van-tabs>.van-tabs__wrap>.van-tab--active>.van-tab__text--ellipsis {
	// 	font-weight: 800 !important;
	// }
	.cheng{
		height: 20vw;
	}
	.body {
		.aaa{
			width: 100vw;
			height: 5vw;
			background-color: @themeColor;
		}
		.top {
			width: 100vw;
			height: 10vw;
			background-color: @themeColor;
		}
		& .conter{
			width: 100vw;
			min-height: 100vh;
			background-color: @backColor;
			border-radius: 5vw;
			position: relative;
			top: -8vw;
			display: flex;
			flex-direction: column;
			align-items: center;
			section{
				margin-top: 5vw;
				width: 90vw;
				background-color: #fff;
				border-radius: 5vw;
				padding: 3vw;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				.sec1{
					width: 100%;
					display: flex;
					justify-content: space-between;
					.time{
						color: rgba(51,51,51,.8);
					}
					.title{
						color: red;
						font-weight: 700;
					}
				}
				.sec2{
					width: 100%;
					display: flex;
					img{
						width: 18vw;
						height: 18vw;
						border-radius: 5vw;
						// border: 1px solid #ccc;
						margin-left: 2vw;
					}					
				}
				.sec3{
					color: rgba(51,51,51,.8);
					font-size: 10px;
				}
				.sec4{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					b>span{
						color: red;
					}
				}
			}
		}
	}
</style>
